<template>
    <div class="news">
        <div class="gr_title">
           <div class="fan" @click="fanhui"><img src="../assets/images/fanhui.png" height="21px" alt=""></div>{{!pdd?'消息中心':'消息详情'}}
           <div :class="pdd?'active':''">排序 <img src="../assets/images/排序.png" alt="" height="15px"></div>
        </div>
        <van-tabs v-model="activeName" v-show="!pdd">
            <van-tab :title="i.title" :name="i.xuanz" v-for="(i,inde) in arrtitle" :key='inde'>
                <div v-show="flag" class="zw">
                    <img class="tu" src="../assets/images/暂无消息.png" alt="" height="90px">
                    <p>暂无消息</p>
                </div> 
                <!-- v-show="zhi==item.msg" -->
                <div class="xiaoxi" v-for='(item,index) in arr' :key='index' v-show="(i.zhi==item.type) || (i.pd)" @click="qingqiu(item.id)">
                       <img v-if="item.type==2" src="../assets/images/个人信息.png" alt="" height="35px">
                       <img v-else src="../assets/images/系统消息.png" alt="" height="35px">
                       <img v-show="item.isReader" src="../assets/images/红点.png" height="8px" alt="">
                       <div class="neir">
                           <div class="l">
                           <p>{{item.title}} <img v-show="item.top" src="../assets/images/置顶.png" alt="" height="10px"></p>
                           <p class="fabu">发布人: {{item.sourceName}}</p>
                           </div>
                           <div class="r">
                                {{item.createTime}}
                                <img src="../assets/images/列表箭头.png" height="10px" alt="">
                           </div>
                       </div>
                </div>
            </van-tab>
        </van-tabs>
        <div v-show="pdd" class="xiangqing">
           <div class="xq_title">
               <div class="l">
                   <p style="font-size:16px;color:#000">{{brr.title}}</p>
                   <p style="font-size:14px">发布人: {{brr.sourceName}}</p>
               </div>
               <div class="r" style="font-size:14px;padding-right: 10px;">
                   {{brr.createTime}}
               </div>
           </div>
            <div style="color:#666">{{brr.msgDate}}</div>
        </div>
    </div>
</template>

<script>
import {message,messagexiangq,updates} from '../requset/api'
export default {
    data () {
        return {
       activeName: 'a',
       arr:[],
       //详情数据
       brr:{},
       //判断有无消息
       flag:true,
       //是否隐藏页面
       pdd:false,
       arrtitle:[
           {title:'全部消息',pd:true,xuanz:'a',zhi:0},
           {title:'系统消息',pd:false,xuanz:'b',zhi:1},
           {title:'个人消息',pd:false,xuanz:'c',zhi:2},
           ]
        }
    },
    methods:{
         fanhui(){
             if(this.pdd){
                 this.pdd = false
             }else{
                 this.$router.back()
             }
           
        },
        qingqiu(id){
            // console.log(id);
            let datas ={
                id:id
            }
            let formData = new FormData()
            for(let key in datas){
                formData.append(key,datas[key])
            }
            messagexiangq(id).then(res=>{
                if(res.errCode==0){
                    // console.log(res);
                    this.brr=res.data
                    this.pdd=true
                }
            })
            updates(formData).then(res=>{
            //   console.log(res);
            })
        }
    },
    created(){
        message({
            current:1,
            size:10,
            type:0
        }).then(res=>{
            if(res.errCode==0){
                // console.log(res.data.records);
                this.arr = res.data.records
                this.flag= false
            }
            
        })
    }
}
</script>
 
<style lang = "less" scoped>
.news{
    min-height: 100vh;
    width: 100%;
    background: #f5f5f5;
  .gr_title{
        width: 100%;
        height:43px;
        background-color: #003399;
        background-size: 80%;
        display: flex;
        justify-content: space-between;
        box-sizing: border-box;
        color: #fff;
        text-align: center;
        line-height: 43px;
        padding-right: 16px;
        .fan{
            line-height: 43px;
            margin-left: 10px; 
            img{
                float: left;
                margin-top: 12px;
            }
        }
        .active{
            opacity: 0;
        }
    }
/deep/.van-tab--active{
    color: #003399;
}
/deep/.van-tabs__line{
    width: 60px;
    background: #ffcc33;
} 
/deep/.van-tab__pane{
    min-height: 80vh;
    width: 100%;
   .zw{
       color: #ddd;
       text-align: center;
       /* margin-top: 50%; */
       padding-top:50% ;
   }
}
.xiaoxi{
    padding-left: 15px;
    height: 65px;
    padding-top: 15px;
    box-sizing: border-box;
    display: flex;
    font-size: 14px;
    position: relative;
    background: #fff;
    .neir{
        margin-left: 10px;
        display: flex;
        width: 100%;
        justify-content: space-between;
        img{
        margin-right: 10px;
    }
    div{
        .fabu{
            color: #999;
        }
    }
    .r{
        color: #999;
        line-height: 50px;
    }
    }
}
.xiangqing{
    background: #fff;
    margin-top: 10px;
    box-sizing: border-box;
    padding-top: 15px;
    padding-left: 15px;
    padding-bottom: 15px;
    .xq_title{
        display: flex;
        justify-content: space-between;
        margin-bottom: 22px;
        color: #999;
    }
}
}
   
</style>